<template>
  <div class="addArticle">
    <el-card class="box-card">
      <!-- 标题区域 -->
      <div slot="header">
        <span @click="$router.push('/')" class="toHomt">首页</span> >
        <span style="color:#777;">发布文章</span>
      </div>
      <!-- 内容区域 -->
      <div class="card-body">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item prop="title" label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item prop="content" label="内容">
            <quillEditor
              class="quillEditor"
              v-model="form.content"
              @change="validateItem('content')"
              :options="{ placeholder: '请输入文章内容' }"
            ></quillEditor>
          </el-form-item>
          <el-form-item prop="cover" label="封面">
            <el-radio-group v-model="form.cover.type">
              <el-radio :label="1">单图</el-radio>
              <el-radio :label="3">多图</el-radio>
              <el-radio :label="0">无图</el-radio>
              <el-radio :label="-1">自动</el-radio>
            </el-radio-group>
            <div class="cover">
              <img
                v-if="form.cover.type === 1 || form.cover.type === 3"
                src="@/assets/default.png"
                alt=""
              />
              <img
                v-if="form.cover.type === 3"
                src="@/assets/default.png"
                alt=""
              />
              <img
                v-if="form.cover.type === 3"
                src="@/assets/default.png"
                alt=""
              />
            </div>
          </el-form-item>
          <el-form-item prop="channel" label="频道">
            <el-select v-model="form.channel">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm('form')" type="primary"
              >发表</el-button
            >
            <el-button>存入草稿</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { apiGetChannelId, queryArticles } from '@/api/article'
// 导入富文本编辑器
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      channelList: [], // 获取到的频道
      form: {
        title: '', // 文章标题
        content: '', // 文章内容
        cover: {
          type: 0, // 封面对应类型
          images: [] // 封面图片字符串
        },
        channel: '' // 频道对应id
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'change' },
          { min: 5, max: 30, message: '长度在5到30之间', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'change' },
          { min: 5, message: '最少20个字', trigger: 'change' }
        ],
        channel: [{ required: true, message: '请选择频道', trigger: 'change' }]
      }
    }
  },
  methods: {
    async queryArticles () {
      const params = {
        // 如果传参属性为null的话，axios就把不传这个属性
        status: null
      }
      // 如果用户选择的是全部的，不传status
      // delete params.status
      const data = await queryArticles(params)
      console.log(data)
    },
    // 获取频道列表
    async getChannelList () {
      const res = await apiGetChannelId()
      window.console.log(res)
      this.channelList = res.data.data.channels
    },
    // 单独验证非element表单项
    validateItem (str) {
      this.$refs.form.validateField(str)
    },
    // 提交表单时验证
    submitForm (form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  created () {
    // this.getChannelList()
    this.queryArticles()
  }
}
</script>

<style lang="less" scoped>
.addArticle {
  .toHomt {
    font-weight: 700;
    &:hover {
      color: #409eff;
      cursor: pointer;
    }
  }
  .quillEditor {
    /deep/ .ql-editor {
      height: 260px;
    }
  }
  .cover {
    img {
      width: 150px;
      height: 150px;
      margin-top: 20px;
      margin-right: 40px;
      border: 1px dashed #ddd;
      cursor: pointer;
    }
  }
}
</style>
